<template>
  <div style="margin: 15px 0px 0px 40px; padding-bottom: 20px; float: left;">
    <div style="font-size: 18px; margin-bottom: 20px; color: black; font-weight: bold;"> 什么是电子授权</div>
    <div style="font-size: 14px; margin-bottom: 20px; color: rgb(31, 45, 61); line-height: 2; font-weight: 400;">
      <p> 您可以在此下载打印“预授权二维码”，候选人通过扫描二维码完成预授权 </p>
      <p>预授权后的候选人经主账号审批通过后，报告立即生成！</p></div>
    <div style="font-size: 12px; margin-bottom: 20px; color: rgb(116, 128, 140); line-height: 2; font-weight: 400;">
      <p>1. 请保证子账户余额充足</p>
      <p>2. 二维码不刷新一直有效，为保障资金安全，建议定期刷新二维码重新下载使用 </p>
    </div>
    <div>
      <div style="width: 150px; height: 150px; float: left;">
        <img id="urlQrcode" :src="qrImg"
             style="width: 100%; height: 100%; border: 1px solid rgb(205, 205, 205);">
      </div>
      <div style="padding: 70px 0px 0px 30px; float: left;">
        <el-button type="primary" @click="renovate">刷新</el-button>
        <el-button type="primary" @click="downLoadImg">下载</el-button>
      </div>
    </div>
  </div>
</template>

<script>
  import {authAddCode, setAuthAddCode} from "@/api/system/user"
  import QRCode from "qrcode";

  export default {
    name: "elecAuth",
    data() {
      return {
        authCode: null,
        qrImg: null
      }
    },
    created() {
      authAddCode().then(res => {
        this.authCode = res.msg
        this.qrCode();
      })
    },

    methods: {
      renovate() {
        setAuthAddCode().then(res => {
          this.authCode = res.msg
          this.qrCode()
        })
      },
      submitForm() {
        this.$modal.msgSuccess('已复制')
      },
      qrCode() {
        let cxUrl = window.location.origin + '/elecAuth?ac=' + this.authCode
        cxUrl += ('&ui=' + this.$store.state.user.id)
        console.log('---cxUrl---', cxUrl)
        QRCode.toDataURL(cxUrl, (err, qrCodeData) => {
          if (err) console.error(err)
          this.qrImg = qrCodeData
        })
      },
      downLoadImg() {
        const image = document.getElementById('urlQrcode');
        const link = document.createElement('a');
        link.href = image.src;
        link.download = this.$store.state.user.name + '_授权进件二维码.png';
        // 可以自定义图片名称
        document.body.appendChild(link);
        link.click();// 模拟点击
        document.body.removeChild(link);
      }
    }
  }
</script>

